<template>
  <div class="aa">
    <p v-if="item.flag">{{ item.content }}</p>
    <el-input v-model="aa" style="width: 240px" v-else />

    <p class="pp">
      <button @click="del(index)">删除</button>
      <button v-if="item.flag" @click="edit(index, item)">修改</button>
      <button v-else @click="save(index)">保存</button>
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
interface IItem {
  flag: boolean
  content: string
}

withDefaults(
  defineProps<{
    item: IItem
    index: number
  }>(),
  {
    item: () => ({ flag: true, content: '123' }),
    index: 0
  }
)
let aa = ref('')

const emit = defineEmits(['handleDel', 'handleEdit', 'handleSave'])

// 删除
function del(index: number) {
  emit('handleDel', index)
}
// 修改
function edit(index: number, item: IItem) {
  aa.value = item.content
  emit('handleEdit', index)
}
// 保存
function save(index: number) {
  emit('handleSave', index, aa.value)
}
</script>

<style scoped>
.pp {
  margin-top: 10px;
}
.aa {
  margin-top: 10px;
  padding: 20px;
  border: 1px solid #000;
}
</style>
